<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统 - 主页</title>
    <link rel="stylesheet" th:href="@{/css/home.css}" type="text/css">
</head>
<body>
<div class="header">
    <div class="logo">
        <h1>后台管理系统</h1>
    </div>
    <div class="manager-info">
        <span>欢迎，管理员</span>
        <button class="logout-btn" id="logout-btn">退出登录</button>
    </div>
</div>

<div class="container">
    <div class="sidebar">
        <ul class="nav-menu">
            <li class="nav-item active" data-target="users">
                <span class="nav-icon">👥</span>
                <span class="nav-text">用户管理</span>
            </li>
            <li class="nav-item" data-target="courses">
                <span class="nav-icon">📚</span>
                <span class="nav-text">课程管理</span>
            </li>
            <li class="nav-item" data-target="authorizations">
                <span class="nav-icon">🔑</span>
                <span class="nav-text">授权管理</span>
            </li>
            <li class="nav-item" data-target="app-version">
                <span class="nav-icon">📱</span>
                <span class="nav-text">版本管理</span>
            </li>
            <li class="nav-item" data-target="feedback">
                <span class="nav-icon">💬</span>
                <span class="nav-text">意见反馈</span>
            </li>
        </ul>
    </div>

    <div class="main-content">
        <!-- 用户管理面板 -->
        <div class="content-panel active" id="users-panel">
            <div class="panel-header">
                <h2>用户管理</h2>
                <div class="toolbar">
                    <button class="btn primary">添加用户</button>
                    <div class="search-box">
                        <input type="text" placeholder="搜索用户..." class="search-input">
                        <span class="search-icon">🔍</span>
                    </div>
                </div>
            </div>
            <div class="table-container">
                <table class="data-table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>头像</th>
                        <th>昵称</th>
                        <th>手机号</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                        <!-- 动态加载用户数据 -->
                    </tbody>
                </table>
            </div>
            <div class="pagination">
                <!-- 分页控件 -->
            </div>
        </div>

        <!-- 课程管理面板 -->
        <div class="content-panel" id="courses-panel">
            <div class="panel-header">
                <h2>课程管理</h2>
            </div>

            <!-- 课程管理子面板导航 -->
            <div class="sub-nav">
                <button class="sub-nav-btn active" data-target="course-stage">
                    <span class="nav-icon">📚</span>
                    <span class="nav-text">课程阶段</span>
                </button>
                <button class="sub-nav-btn" data-target="course">
                    <span class="nav-icon">📖</span>
                    <span class="nav-text">课程节选</span>
                </button>
                <button class="sub-nav-btn" data-target="course-content">
                    <span class="nav-icon">📝</span>
                    <span class="nav-text">节选内容</span>
                </button>
                <button class="sub-nav-btn" data-target="course-audio">
                    <span class="nav-icon">🎵</span>
                    <span class="nav-text">节选音频</span>
                </button>
            </div>

            <!-- 课程阶段管理子面板 -->
            <div class="sub-panel active" id="course-stage-panel">
                <div class="panel-header">
                    <div class="toolbar">
                        <button class="btn primary" id="add-stage-btn">添加阶段</button>
                        <div class="search-box">
                            <input type="text" placeholder="搜索阶段..." class="search-input">
                            <span class="search-icon">🔍</span>
                        </div>
                    </div>
                </div>
                <div class="table-container">
                    <table class="data-table">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>阶段标题</th>
                            <th>封面图片</th>
                            <th>简介</th>
                            <th>创建时间</th>
                            <th>更新时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="stages-table-body">
                            <!-- 动态加载阶段数据 -->
                        </tbody>
                    </table>
                </div>
                <div class="pagination">
                    <!-- 分页控件 -->
                </div>
            </div>

            <!-- 课程节选管理子面板 -->
            <div class="sub-panel" id="course-panel">
                <div class="panel-header">
                    <div class="toolbar">
                        <button class="btn primary" id="add-course-btn">添加课程</button>
                        <div class="search-box">
                            <input type="text" placeholder="搜索课程..." class="search-input">
                            <span class="search-icon">🔍</span>
                        </div>
                    </div>
                </div>

                <div class="table-container">
                    <table class="data-table">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>所属阶段</th>
                            <th>课程名称</th>
                            <th>封面图片</th>
                            <th>简介</th>
                            <th>创建时间</th>
                            <th>更新时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="courses-table-body">
                            <!-- 动态加载课程数据 -->
                        </tbody>
                    </table>
                </div>
                <div class="pagination">
                    <!-- 分页控件 -->
                </div>
            </div>

            <!-- 节选内容管理子面板 -->
            <div class="sub-panel" id="course-content-panel">
                <div class="panel-header">
                    <div class="toolbar">
                        <button class="btn primary" id="add-content-btn">添加内容</button>
                        <div class="search-box">
                            <input type="text" placeholder="搜索内容..." class="search-input">
                            <span class="search-icon">🔍</span>
                        </div>
                    </div>
                </div>

                <div class="table-container">
                    <table class="data-table">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>所属课程</th>
                            <th>内容标题</th>
                            <th>封面图片</th>
                            <th>内容</th>
                            <th>创建时间</th>
                            <th>更新时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="contents-table-body">
                            <tr th:each="content : ${contents}">
                                <td th:text="${content.id}"></td>
                                <td th:text="${content.cid}"></td>
                                <td th:text="${content.title}"></td>
                                <td th:text="${content.cover}"></td>
                                <td th:text="${content.concent}"></td>
                                <td th:text="${content.createTime}"></td>
                                <td th:text="${content.updateTime}"></td>
                                <td>
                                    <button class="btn small view-detail" data-id="${content.id}">查看详情</button>
                                    <button class="btn small view-audio" data-id="${content.id}" data-title="${content.title}">查看音频</button>
                                    <button class="btn small edit-content" data-id="${content.id}" data-cid="${content.cid}" data-title="${content.title}" data-concent="${content.concent || ''}" data-cover="${content.cover || ''}">编辑</button>
                                    <button class="btn small danger" data-id="${content.id}">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="pagination">
                    <!-- 分页控件 -->
                </div>

                <!-- 内容详情区域 -->
                <div id="content-detail" class="content-detail" style="display: none;">
                    <div id="content-detail-info"></div>
                </div>
            </div>

            <!-- 节选音频管理子面板 -->
            <div class="sub-panel" id="course-audio-panel">
                <div class="panel-header">
                    <div class="toolbar">
                        <button class="btn primary" id="add-audio-btn">添加音频</button>
                        <div class="search-box">
                            <input type="text" placeholder="搜索音频..." class="search-input">
                            <span class="search-icon">🔍</span>
                        </div>
                    </div>
                </div>

                <div class="table-container">
                    <table class="data-table">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>所属内容</th>
                            <th>音频标题</th>
                            <th>创建时间</th>
                            <th>更新时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="audios-table-body">
                            <!-- 动态加载音频数据 -->
                        </tbody>
                    </table>
                </div>
                <div class="pagination">
                    <!-- 分页控件 -->
                </div>
            </div>
        </div>

        <!-- 授权管理面板 -->
        <div class="content-panel" id="authorizations-panel">
            <div class="panel-header">
                <h2>授权管理</h2>
                <div class="toolbar">
                    <button class="btn primary" id="add-authorization-btn">添加授权</button>
                    <div class="search-box">
                        <input type="text" placeholder="搜索授权..." class="search-input">
                        <span class="search-icon">🔍</span>
                    </div>
                </div>
            </div>
            <div class="table-container">
                <table class="data-table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户账号</th>
                        <th>阶段名称</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>创建时间</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="authorizations-table-body">
                        <!-- 动态加载授权数据 -->
                    </tbody>
                </table>
            </div>
            <div class="pagination">
                <!-- 分页控件 -->
            </div>
        </div>
        
        <!-- APP版本管理面板 -->
        <div class="content-panel" id="app-version-panel">
            <div class="panel-header">
                <h2>APP版本管理</h2>
                <div class="toolbar">
                    <button class="btn primary" id="upload-app-version-btn">上传新版本</button>
                </div>
            </div>
            <div class="table-container">
                <table class="data-table">
                    <tbody id="current-version-info">
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 意见反馈面板 -->
        <div class="content-panel" id="feedback-panel">
            <div class="panel-header">
                <h2>意见反馈</h2>
                <div class="toolbar">
                    <div class="search-box">
                        <input type="text" placeholder="搜索反馈..." class="search-input">
                        <span class="search-icon">🔍</span>
                    </div>
                </div>
            </div>
            <div class="table-container">
                <table class="data-table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户ID</th>
                        <th>用户手机</th>
                        <th>用户昵称</th>
                        <th>反馈内容</th>
                        <th>提交时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="feedback-table-body">
                        <!-- 动态加载反馈数据 -->
                    </tbody>
                </table>
            </div>
            <div class="pagination">
                <!-- 分页控件 -->
            </div>
        </div>
    </div>
</div>

<!-- 模态框模板容器 -->
<div id="modal-templates" style="display: none;">
    <!-- 模态框模板将通过JavaScript加载 -->
</div>

<script src="/js/home/home.js"></script>
<script src="/js/home/utils.js"></script>
<script src="/js/home/user-panel.js"></script>
<script src="/js/home/course-stage-panel.js"></script>
<script src="/js/home/course-section-panel.js"></script>
<script src="/js/home/course-content-panel.js"></script>
<script src="/js/home/authorization-panel.js"></script>
<script src="/js/home/audio-panel.js"></script>
<script src="/js/home/feedback-panel.js"></script>
<script src="/js/home/app-version-panel.js"></script>
</body>
</html>
